<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../css/_header.css"/>
    <link rel="stylesheet" type="text/css" href="../css/nav.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<script src="../js/vue.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../plugins/elementui/index.js"></script>
<style>
    html,
    body {
        height: 100%;
    }
    *{
        margin: 0;
        padding: 0;
    }
</style>
<body>
    <div style="width: 100%;height: 100%;">
        <!--页面头部-->
        <header class="main-header" id="main-header">
            <div class="header-left">
                <span class="header-left-span"><b>欢迎使用学生就业信息管理系统</b></span>
            </div>
            <div class="header-right">
                <div class="login" v-show="username.length == 0">
                    请先<a href="login.html">登录</a>
                </div>
                <div class="success" v-show="username.length != 0">
                    <i class="fa fa-user-o"></i>
                    <span>欢迎您,{{username}}<i class="fa fa-caret-left"></i></span>

                    <ul>
                        <li style="border-top: none;">切换账号</li>
                        <li>注销</li>
                    </ul>
                </div>
            </div>
        </header>
		<script>
			$(function(){
				$(".success").hover(function(){
					$(this).children("ul").slideDown();
				},function(){
					$(this).children("ul").slideUp();
				})
			})
		</script>
        <script>
            var top = new Vue({
                el: "#main-header",
                data: {
                    username: "",
                },
                created() {
                    this.getCookie()
                },
                methods: {
                    getCookie: function () {
                        let username = $.cookie("username");
                        console.log(username)
                        if(username!=undefined) this.username = username;
                    }
                }
            })
        </script>

        <!--  左侧导航  -->
        <aside class="admin-nav" id="admin-nav" >
            <div>
                <ul class="admin-nav-li">
                    <li v-if="studentMage" class="a_li">
                        <a href="#" >
                            <i class="fa fa-address-card"></i>
                            <span>学生信息管理</span>
							<i class="fa fa-angle-left nav_fx"></i>
                            <ul class="a_li_li" style="display: none;">
                                <li>学生基本信息</li>
                            </ul>
							
                        </a>
                    </li>
                    <li v-if="empMage" class="a_li">
                        <a href="#" >
                            <i class="fa fa-briefcase"></i>
                            <span>就业管理</span>
							<i class="fa fa-angle-left nav_fx"></i>
                             <ul class="a_li_li" style="display: none;">
                                <li>就业状态</li>
                                <li>就业信息</li>
                                <li>面试信息</li>
                                <li>企业资源管理</li>
                            </ul>
                        </a>
                    </li>
                    <li v-if="sysMage" class="a_li">
                        <a href="#" >
                            <i class="fa fa-cog"></i>
                            <span>系统管理</span>
							<i class="fa fa-angle-left nav_fx"></i>
                            <ul class="a_li_li" style="display: none;">
                                <li>用户管理</li>
                                <li>权限管理</li>
                            </ul>
                        </a>
                    </li>
                    <li v-if="staMage" class="a_li">
                        <a href="#">
                            <i class="fa fa-bar-chart"></i>
                            <span>报表统计</span>
							<i class="fa fa-angle-left"></i>
                            <ul class="a_li_li" style="display: none;margin-left: 13px;">
                                <li>报表分析</li>
                            </ul>
                        </a>
                    </li>
                </ul>
            </div>
        </aside>
		<script>
			$(function(){
				$(".a_li").click(function(){
					var index = $(this).index();
					$(".a_li_li").eq(index).slideToggle().siblings(".a_li_li").slideUp()
				})
			})
		</script>
        <script>
            var nav = new Vue({
                el:"#admin-nav",
                data:{
                    role:"",
					//学生信息管理
                    studentMage:false,
					//就业管理
                    empMage:true,
					//系统管理
                    sysMage:false,
					//报表统计
                    staMage:false,
                },
                mounted() {
                    this.getRole();
                },
                methods: {
                    getRole(){
                        this.role = $.cookie("role");
                        if(this.role==='admin'){
                            this.studentMage=true;
                            this.staMage=true;
                            this.sysMage=true;
                        }
                        if(this.role==='teacher'){
                            this.studentMage=true;
                            this.staMage=true;
                        }
                    },
                }
            })
        </script>
		
		<!-- 内容 -->
        <article class="article" style="width: 87%;min-width:600px;height: 93%;position: absolute;margin-left: 200px;margin-top: 50px;">
            <iframe src="book.html" width="99%" height="99%" style="position: absolute;margin: 0;padding: 0;"></iframe>
        </article>
    </div>
</body>
</html>
